import { useState } from "react";
import IconButton from "@mui/material/IconButton";
import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
import AddCircleIcon from "@mui/icons-material/AddCircle";
import SwipeableDrawer from "@mui/material/SwipeableDrawer";

const BlindBox = (props: any) => {
  const { openModal } = props;

  const [cardNum, setcardNum] = useState(1);

  const [openDrawer, setOpenDrawer] = useState(false);

  // 更新状态变量的值
  const SetcardNum = (event: any) => {
    setcardNum(event.target.value);
  };

  /**
   * 增加减少
   * @param type
   */
  const addMinus = (type: string) => {
    if (type === "add") {
      const n = cardNum + 1;
      setcardNum(n);
    } else {
      const n = cardNum - 1;
      setcardNum(n);
    }
  };

  /**
   * 打开抽屉
   * @param anchor
   * @param open
   * @returns
   */
  const toggleDrawer = (open: boolean) => {
    setOpenDrawer(open);
  };

  return (
    <div className="blind-box">
      <div
        className="left-link"
        onClick={() => {
          openModal(1);
        }}
      >
        <span className="name">Blind Box</span>
        <img src="/images/question_icon.png" alt="" />
      </div>
      <div className="nft-total">
        <span className="name">NFT</span>
        <span className="num">934,123</span>
        <span className="unit">H/s</span>
      </div>
      {/* 盲盒动画 */}
      <div className="open-box">
        <div className="blind-box-card">
          <img src="/images/blind_box_card.png" alt="" />
        </div>
        <div className="blind-box">
          <img src="/images/blind_box.png" alt="" />
        </div>
      </div>
      <div className="opne-btn">
        <div className="top-box">
          <span className="name">Remaining Blind Boxes</span>
          <span className="value">4532</span>
        </div>
        <div className="btn-num-box">
          <div
            className="btn"
            onClick={() => {
              toggleDrawer(true);
            }}
          >
            <div className="name">Open Blind Box</div>
            <div className="desc">
              <span className="logo">
                <img src="/images/ton.png" alt="" />
              </span>
              <span className="num">100</span>
              <span className="usdt">TON</span>
            </div>
          </div>
        </div>
      </div>
      <SwipeableDrawer
        anchor="bottom"
        open={openDrawer}
        onClose={() => toggleDrawer(false)}
        onOpen={() => toggleDrawer(true)}
      >
        <div className="nft-bottom-box">
          <div className="num-box">
            <IconButton
              onClick={() => {
                addMinus("minus");
              }}
            >
              <RemoveCircleIcon sx={{ color: "#ffc104", fontSize: 30 }} />
            </IconButton>
            <input
              type="number"
              placeholder="Number"
              value={cardNum}
              onChange={SetcardNum}
            />
            <IconButton
              onClick={() => {
                addMinus("add");
              }}
            >
              <AddCircleIcon sx={{ color: "#ffc104", fontSize: 30 }} />
            </IconButton>
          </div>
          <button className="submit-btn">buy</button>
        </div>
      </SwipeableDrawer>
    </div>
  );
};

export default BlindBox;
